CSS View Transition Capture: Saumattoman käyttöliittymän luominen elementin tilan säilyttämisellä

Verkkokehityksen dynaamisessa maailmassa on ensisijaisen tärkeää luoda käyttöliittymiä, jotka tuntuvat intuitiivisilta, reagoivilta ja todella mukaansatempaavilta. Kun verkkosovellusten monimutkaisuus kasvaa, kasvaa myös tarve saumattomille siirtymille eri näkymien tai tilojen välillä. Äkillisten sivun uudelleenlatausten tai töksähtelevien visuaalisten muutosten ajat ovat ohi; nykypäivän käyttäjät odottavat sujuvaa, lähes sovellusmaista kokemusta suoraan selaimissaan. Tämän odotuksen täyttäminen on historiallisesti ollut merkittävä haaste kehittäjille, vaatien usein monimutkaisia JavaScript-animaatioita, kompleksista tilanhallintaa tai kömpelöitä kolmannen osapuolen kirjastoja.

Tässä kohtaa kuvaan astuvat CSS View Transitions, mullistava verkkoalustan ominaisuus, joka on suunniteltu yksinkertaistamaan eleganttien ja suorituskykyisten käyttöliittymäsiirtymien luomista. Vaikka View Transitions -siirtymät tarjoavat tehokkaan mekanismin visuaalisten muutosten animointiin, niiden todellinen nerokkuus piilee vähemmän ilmeisessä, mutta syvällisesti vaikuttavassa kyvyssä: elementin tilan sieppauksessa (Element State Capture). Tämä ominaisuus ylittää pelkän visuaalisen muodonmuutoksen; se säilyttää älykkäästi elementtien olennaisen tilan – käyttäjän syötteistä vierityspaikkoihin ja dynaamiseen muotoiluun – varmistaen aidosti jatkuvan ja miellyttävän käyttäjäkokemuksen näkymien vaihtuessa.

Tämä kattava opas sukeltaa syvälle CSS View Transition Capture -ominaisuuden mekaniikkaan, tutkien sen tarpeellisuutta, toimintaperiaatteita ja sitä, miten kehittäjät maailmanlaajuisesti voivat hyödyntää sitä rakentaakseen erittäin kehittyneitä ja saavutettavia verkkosovelluksia. Paljastamme, kuinka tämä teknologia vastaa käyttöliittymäkehityksen pitkäaikaisiin haasteisiin tarjoamalla käytännön näkemyksiä ja toimivia strategioita toteutukseen erilaisissa projekteissa ja globaaleille yleisöille.

CSS View Transitions -siirtymien ymmärtäminen: Perusteet

Ennen kuin pureudumme Element State Capture -ominaisuuteen, on olennaista ymmärtää CSS View Transitions -siirtymien peruskonsepti. Ytimessään View Transition on selaimen orkestroima mekanismi, joka mahdollistaa sulavat, atomiset siirtymät kahden erillisen DOM-tilan välillä. Sen sijaan, että kehittäjät animoisivat manuaalisesti yksittäisiä elementtejä JavaScriptillä tai monimutkaisilla CSS-avainkehyksillä, he voivat määrittää siirtymän, ja selain hoitaa monimutkaisen prosessin, johon kuuluu tilannekuvien luominen, niiden välillä animointi ja DOMin sulava päivittäminen.

Mitä View Transitions -siirtymät ovat?

View Transitions -siirtymät tarjoavat deklaratiivisen tavan animoida muutoksia DOMiin. Kun siirtymä käynnistetään, selain ei vain vaihda vanhaa sisältöä uuteen; sen sijaan se ottaa tilannekuvan "vanhasta" näkymästä, valmistelee "uuden" näkymän näytön ulkopuolella ja orkestroi sitten animaation vanhan ja uuden näkymän relevanttien elementtien tilannekuvien välillä. Tämä prosessi varmistaa, että siirtymät ovat aina sulavia, vaikka taustalla olevat DOM-päivitykset olisivat monimutkaisia tai pitkäkestoisia.

Ensisijainen hyöty on animaation erottaminen DOM-päivityksestä. Voit päivittää DOMisi millä tahansa tavalla (esim. muuttamalla luokkia, lisäämällä/poistamalla elementtejä, päivittämällä innerHTML:ää), ja jos käärit tämän päivityksen View Transition -siirtymään, selain yrittää animoida muutoksen. Tämä yksinkertaistaa merkittävästi koodia, parantaa ylläpidettävyyttä ja tehostaa suorituskykyä siirtämällä monimutkaiset animaatiotehtävät selaimen optimoidulle renderöintiputkelle.

'Tilannekuva'-konsepti

View Transitions -siirtymien taika perustuu "tilannekuvien" (snapshots) konseptiin. Kun käynnistät näkymäsiirtymän, selain ottaa kuvan (renderöintitilannekuvan) DOMin nykyisestä tilasta. Tämä on "vanha" näkymä. Sitten JavaScript-koodisi päivittää DOMin vastaamaan "uutta" näkymää. Välittömästi DOM-päivityksen jälkeen selain ottaa toisen tilannekuvan relevanteista elementeistä niiden uusissa sijainneissa ja tyyleissä. Siirtymä animoi sitten näiden kahden tilannekuvan välillä.

On tärkeää huomata, että nämä eivät ole vain staattisia kuvia. Selain luo joukon pseudo-elementtejä (esim. `::view-transition-old`, `::view-transition-new`), jotka edustavat näitä tilannekuvia. Näitä pseudo-elementtejä voidaan kohdistaa CSS-animaatioilla, mikä mahdollistaa erittäin mukautettavat ja ilmeikkäät siirtymät. Tämä järjestelmä varmistaa, että vaikka DOM muuttuisi rajusti, käyttäjä kokee jatkuvan, animoidun matkan äkillisen hypyn sijaan.

`view-transition-name`-ominaisuus

Kertoaksemme selaimelle, mitkä elementit tulisi animoida vanhan ja uuden näkymän välillä, ja mikä tärkeintä, minkä elementtien tilat tulisi siepata, käytämme `view-transition-name`-CSS-ominaisuutta. Kun vanhan näkymän elementillä ja uuden näkymän elementillä on sama `view-transition-name`, selain ymmärtää, että ne ovat loogisesti "sama" elementti, vaikka niiden sijainti, koko tai sisältö olisi muuttunut. Se yrittää sitten animoida muodonmuutoksen näiden kahden tilan välillä.

Jos sinulla on esimerkiksi tuotekuva listanäkymässä ja siirryt sitten sen tuotesivulle, saman `view-transition-name`-arvon antaminen kyseiselle tuotekuvalle molemmissa näkymissä kertoo selaimelle, että sen tulee animoida kuvan liike ja koon muutos, luoden "hero image" -siirtymäefektin. `view-transition-name` toimii ainutlaatuisena tunnisteena yhden siirtymän kontekstissa, mahdollistaen selaimen älykkään elementtien yhdistämisen ja animoinnin. Se on tehokas työkalu, joka muuttaa monimutkaiset monivaiheiset animaatiot yksinkertaiseksi deklaratiiviseksi CSS-ominaisuudeksi.

Syväsukellus elementin tilan sieppaukseen

Vaikka `view-transition-name` ymmärretään pääasiassa sen roolista visuaalisten elementtien animoinnissa, sen toiminnallisuus ulottuu paljon pidemmälle kuin pelkkään visuaaliseen muodonmuutokseen. Se on elementin tilan sieppauksen (Element State Capture) kulmakivi, ominaisuus, joka antaa View Transitions -siirtymille mahdollisuuden säilyttää ja siirtää eteenpäin elementtien ei-visuaalisia, interaktiivisia ja dynaamisia tiloja siirtymien yli. Tässä View Transitions -siirtymät todella erottuvat aiemmista animaatiotekniikoista.

Visuaalisuuden tuolla puolen: Tarve tilan säilyttämiselle

Kuvittele tilanne yhden sivun sovelluksessa (SPA), jossa käyttäjä täyttää monivaiheista lomaketta. Hän syöttää tietoja syöttökenttään, siirtyy sitten lomakkeen toiseen osaan (ehkä yhteenvetosivulle) ja palaa sitten edelliseen vaiheeseen. Ilman elementin tilan sieppausta syöttökenttä todennäköisesti nollautuisi, pakottaen käyttäjän syöttämään tietonsa uudelleen. Samoin, ajattele pitkää listaa, jossa käyttäjä on vierittänyt puoleenväliin. Yksityiskohtanäkymään siirtyminen ja sitten takaisin listaan paluu nollaisi tyypillisesti vierityspaikan ylös, häiriten käyttäjän kulkua. Nämä näennäisen pienet ongelmat voivat merkittävästi heikentää käyttäjäkokemusta, johtaen turhautumiseen ja lisääntyneeseen kognitiiviseen kuormitukseen.

Perinteiset verkkoanimaatiot keskittyivät pääasiassa visuaalisiin ominaisuuksiin, kuten sijaintiin, läpinäkyvyyteen tai mittakaavaan. Olennaisten elementtitilojen – kuten syöttökentän `value`, valintaruudun `checked`-tila, elementin `scrollTop` tai `scrollLeft`, sen `focus`-tila tai dynaamisesti sovelletut CSS-mukautetut ominaisuudet – säilyttäminen oli monimutkainen tehtävä. Kehittäjien täytyi manuaalisesti siepata nämä tilat JavaScriptissä ennen DOM-päivitystä ja sitten vaivalloisesti soveltaa ne uudelleen uuden näkymän renderöinnin jälkeen. Tämä oli virhealtista, suorituskykyä kuluttavaa ja johti usein välkkymiseen tai epäjohdonmukaisuuksiin, erityisesti globaaleissa sovelluksissa, joissa verkkoyhteydet ja laiteominaisuudet vaihtelevat.

Elementin tilan sieppaus vastaa suoraan tähän haasteeseen. Yhdistämällä elementin siirtymän yli `view-transition-name`-ominaisuuden avulla selain ei ainoastaan animoi sen visuaalisia ominaisuuksia, vaan myös älykkäästi säilyttää ja soveltaa uudelleen tietyt kriittiset ei-visuaaliset tilat. Tämä johtaa paljon vankempaan, ennustettavampaan ja miellyttävämpään käyttäjäkokemukseen riippumatta siitä, kuinka monimutkaisia sovelluksen tila tai DOM-muutokset ovat.

Miten tilan sieppaus toimii sisäisesti

Kun elementillä on `view-transition-name` ja se esiintyy sekä "vanhassa" että "uudessa" DOM-tilassa, selain suorittaa kehittyneen sieppausprosessin. Se ei ota vain yksinkertaista kuvakaappausta. Sen sijaan se luo jotain, mitä voidaan ajatella "elementin tilannekuvana" sekä vanhalle että uudelle instanssille. Tämä tilannekuva ei koske vain pikselidataa; se sisältää myös avainominaisuuksia, jotka määrittelevät elementin tilan.

Tilan sieppausmekanismi on tiiviisti integroitu siihen, miten selain renderöi ja päivittää elementtejä. Kun `document.startViewTransition()`-funktiota kutsutaan, selain käytännössä keskeyttää DOM-päivityksen renderöinnin ja ottaa tilannekuvan alkuperäisestä tilasta. Tämä sisältää asettelun, piirtämisen ja kriittisesti tiettyjen semanttisten tilojen `view-transition-name`-tunnisteella merkityistä elementeistä. Kun JavaScript on päivittänyt DOMin, otetaan toinen tilannekuva näistä samoista elementeistä (samalla `view-transition-name`-arvolla) niiden uudessa tilassa. Selain interpoloi sitten näiden siepattujen tilojen välillä animaation aikana.

Tämä prosessi on erittäin optimoitu. Se pyrkii minimoimaan asettelun sekoittumisen (layout thrashing) ja varmistaa, että jopa monimutkaisten sisäisten tilojen omaavat elementit voivat siirtyä sulavasti ilman laajaa manuaalista tilanhallintaa kehittäjältä. Avainasemassa on se, että selain sieppaa nämä tilat *ennen* DOM-päivitystä, mikä antaa sille mahdollisuuden soveltaa ne uudelleen `::view-transition-old`- tai `::view-transition-new`-pseudo-elementteihin, jotka edustavat siirtyvää sisältöä.

Käyttäjäsyötteen sieppaaminen ja säilyttäminen

Yksi välittömimmistä ja vaikuttavimmista hyödyistä elementin tilan sieppauksessa on käyttäjäsyötteen säilyttäminen lomakekentissä. Syöttöelementit (``, ``, `<select>`) säilyttävät `value`-attribuuttinsa siirtymän yli, jos niillä on sama `view-transition-name`.</p> <p>Ajatellaan käyttäjää, joka täyttää moniosaista lomaketta kansainvälistä matkavarausta varten. Hän saattaa syöttää nimensä, sähköpostinsa ja matkakohteen yhdessä vaiheessa. Jos hän siirtyy tarkastelemaan valintaansa ja päättää sitten palata muokkaamaan tietoja, perinteinen lähestymistapa todennäköisesti tyhjentäisi lomakekentät edellisen näkymän uudelleenrenderöinnin yhteydessä, mikä johtaisi turhauttavaan tietojen menetykseen. `view-transition-name`-ominaisuuden ja elementin tilan sieppauksen avulla selain siirtää syöttöarvot saumattomasti eteenpäin. Käyttäjän syöte pysyy ennallaan, tarjoten aidosti jatkuvan ja luotettavan lomakkeen täyttökokemuksen, mikä on ratkaisevan tärkeää sovelluksille, jotka palvelevat globaaleja käyttäjiä, joille tietojen syöttö voi olla merkittävä osa työnkulkua.</p> <p>Tämä ominaisuus yksinkertaistaa merkittävästi monimutkaisten lomakkeiden ja interaktiivisten komponenttien kehitystä, koska kehittäjien ei enää tarvitse kirjoittaa mukautettua JavaScriptiä syöttöarvojen tallentamiseksi ja palauttamiseksi näkymien vaihtuessa.</p> <h3>Vierityspaikkojen ja fokuksen ylläpitäminen</h3> <p>Toinen yleinen kipukohta verkkonavigoinnissa on vierityspaikan tai fokuksen menettäminen siirryttäessä näkymien välillä, erityisesti sovelluksissa, joissa on pitkää vieritettävää sisältöä tai monimutkaisia interaktiivisia elementtejä. Kuvittele käyttäjä selaamassa tuotekatalogia, vierittäen satojen tuotteiden läpi. Tuotteen napsauttaminen nähdäkseen sen tiedot ja sitten takaisin-painikkeen tai mukautetun navigointielementin käyttäminen palatakseen katalogiin nollaisi tyypillisesti vierityspaikan, pakottaen käyttäjän etsimään paikkansa uudelleen. Tämä on erityisen ärsyttävää mobiililaitteiden käyttäjille tai alueilla, joilla on hitaampi internet, missä suurten listojen uudelleenvieritys voi olla hankalaa.</p> <p>Elementin tilan sieppaus, kun sitä sovelletaan vieritettävään säilöön (kuten `div`, jolla on `overflow: auto` tai jopa `body` itse), voi säilyttää sen `scrollTop`- ja `scrollLeft`-ominaisuudet. Jos vieritettävällä elementillä on `view-transition-name`, sen vierityspaikka säilyy siirtymän yli, varmistaen, että kun käyttäjä palaa kyseiseen näkymään, hän päätyy täsmälleen sinne, mihin jäi. Vastaavasti, jos elementti oli fokusoitu (esim. syöttökenttä tai painike), sen `focus`-tila voidaan myös säilyttää, mikä parantaa näppäimistönavigointia ja saavutettavuutta, mikä on keskeinen näkökohta globaaleille käyttäjille, joilla on erilaisia syöttötapoja ja saavutettavuustarpeita.</p> <h3>Dynaamisten CSS-ominaisuuksien ja mukautettujen ominaisuuksien säilyttäminen</h3> <p>Verkko on yhä dynaamisempi, ja elementtien tyylejä manipuloidaan usein JavaScriptillä tai ne reagoivat käyttäjän vuorovaikutukseen. CSS-mukautetut ominaisuudet (muuttujat) ovat keskeisessä asemassa näiden dynaamisten tyylien hallinnassa. Elementin tilan sieppaus ulottuu myös näihin. Jos elementin tyyli, mukaan lukien sen CSS-mukautetut ominaisuudet, muuttuu siirtymän aikana ja sillä on `view-transition-name`, nämä tyylit siepataan.</p> <p>Tämä tarkoittaa, että jos käytät CSS-muuttujia sovelluksen teeman hallintaan (esim. vaalea/tumma tila) tai komponenttikohtaisten tilojen hallintaan (esim. avatun harmonikka-elementin korkeus), selain voi ylläpitää nämä arvot siirtymän aikana. Esimerkiksi, jos komponentin `transform`-ominaisuutta säädetään CSS-muuttujan avulla, sieppaus varmistaa, että visuaalinen muunnos jatkuu sulavasti näkymäsiirtymän yli sen sijaan, että se palaisi oletusarvoon ennen kuin uusi näkymä soveltaa tyylinsä. Tämä antaa kehittäjille mahdollisuuden luoda erittäin hienostuneita, dataohjattuja animaatioita vähemmällä vaivalla, mahdollistaen ainutlaatuisen brändäyksen ja käyttöliittymän johdonmukaisuuden kansainvälisillä markkinoilla.</p> <h3>SVG- ja Canvas-elementtien tila</h3> <p>Sovelluksissa, jotka nojaavat vahvasti rikkaaseen grafiikkaan, interaktiivisiin kaavioihin tai mukautettuihin visualisointeihin, View Transitions -siirtymät voivat myös helpottaa tilan sieppausta monimutkaisille elementeille, kuten SVG:lle ja Canvasille. Vaikka Canvas-elementin koko sisäistä tilaa ei tyypillisesti siepata (koska se on olennaisesti bittikartta), SVG-elementin DOM-attribuutit ja tyylit siepataan. Jos SVG-elementillä on dynaamisia attribuutteja tai tyylejä, jotka muuttuvat näkymätilojen välillä, ja sillä on `view-transition-name`, nämä muutokset voidaan animoida saumattomasti.</p> <p>Jos sinulla on esimerkiksi SVG-ikoni, joka vaihtaa väriä tai muotoa käyttäjän vuorovaikutuksen perusteella, ja tämä ikoni siirtyy toiseen osaan näyttöä, sen visuaalinen tila (väri, viivanleveys, muunnos) voidaan siepata ja animoida. Tämä avaa uusia mahdollisuuksia luoda visuaalisesti rikkaita ja interaktiivisia datanäkymiä, peliliittymiä tai opetusmateriaalia, joiden on siirrettävä monimutkaista grafiikkaa sulavasti ilman hankalaa JavaScriptin uudelleenrenderöintiä tai välkkymistä, tarjoten johdonmukaisen kokemuksen millä tahansa laitteella, missä päin maailmaa tahansa.</p> <h3>JavaScript-ohjattujen tilojen sieppaaminen</h3> <p>Vaikka View Transitions -siirtymät hoitavat paljon deklaratiivisesti, JavaScriptillä on edelleen tilaa vaikuttaa ja tehostaa sieppausprosessia. Kehittäjät voivat suorittaa toimintoja välittömästi ennen kuin selain ottaa "vanhan" tilannekuvan tai sen jälkeen, kun "uusi" DOM on renderöity, mutta ennen sen tilannekuvan ottamista. Tämä mahdollistaa tarkemman hallinnan siitä, mitä tiettyjä tiloja siepataan tai miten elementtejä valmistellaan siirtymää varten.</p> <p>Saatat esimerkiksi haluta pakottaa tietyn CSS-mukautetun ominaisuuden tiettyyn arvoon juuri ennen vanhaa tilannekuvaa varmistaaksesi tietyn animaation aloitustilan. Tai, kun uusi DOM on renderöity, saatat säätää elementin tilaa jonkin sovelluslogiikan perusteella ennen lopullisen tilannekuvan ottamista, varmistaen, että animaatio heijastaa oikein tarkoitettua lopputilaa. Tämä CSS:n ja JavaScriptin välinen vuorovaikutus tarjoaa maksimaalisen joustavuuden kehittäjille siirtymien ja tilan säilyttämisen hienosäätöön sovelluksensa erityisvaatimusten mukaisesti, mikä tekee siitä mukautuvan erilaisiin käyttöliittymämalleihin ja vuorovaikutusmalleihin maailmanlaajuisesti.</p> <h2>View Transition -pseudo-elementit ja niiden rooli sieppauksessa</h2> <p>On tärkeää ymmärtää, miten selain käyttää pseudo-elementtejä View Transition -siirtymän aikana, jotta animaatiota voidaan mukauttaa ja tilan sieppauksen syvyyttä arvostaa. Kun View Transition tapahtuu, selain ei vain animoi varsinaisia DOM-elementtejä suoraan. Sen sijaan se luo väliaikaisen, kerroksellisen rakenteen pseudo-elementeistä, jotka edustavat vanhaa ja uutta tilaa. Nämä pseudo-elementit ovat paikka, jossa siepatut tilat ilmenevät ja animoidaan.</p> <h3><code>::view-transition</code>: Globaali säiliö</h3> <p><code>::view-transition</code>-pseudo-elementti on ylätason säiliö kaikille View Transition -animaatioille. Se käärii koko siirtymäprosessin. Voit kohdistaa tämän pseudo-elementin soveltaaksesi globaaleja tyylejä tai animaatioita, jotka vaikuttavat koko siirtymään, kuten koko sivun häivytys-sisään- tai häivytys-ulos-efekti, tai asettaaksesi CSS-mukautettuja ominaisuuksia, jotka ohjaavat siirtymän ajoituksen tai keston eri osa-alueita. Vaikka se ei suoraan sieppaa elementtikohtaisia tiloja, se tarjoaa kontekstin, jossa kaikki muut siepatut elementit ja niiden animaatiot tapahtuvat.</p> <p>Esimerkiksi `animation-duration`-ominaisuuden soveltaminen `::view-transition`-elementtiin varmistaa, että kaikki myöhemmät siirtymään liittyvät pseudo-elementit noudattavat tätä globaalia ajoitusta, luoden yhtenäisen ja ennustettavan käyttäjäkokemuksen eri alueilla ja laitteilla.</p> <h3><code>::view-transition-group(...)</code>: Itsenäisten elementtien hallinta</h3> <p>Jokaiselle elementille, jolla on `view-transition-name` määritettynä, selain luo `::view-transition-group(...)`-pseudo-elementin. Tämä ryhmä toimii säiliönä kyseisen nimetyn elementin tilannekuvalle. `(...)`-osa sisältää antamasi nimen (esim. `::view-transition-group(my-hero-image)`). Tämä pseudo-elementti sieppaa pääasiassa elementin geometrian (sijainnin ja koon) ja antaa sinun animoida näitä ominaisuuksia siirtymän aikana.</p> <p><code>::view-transition-group</code> itsessään ei suoraan pidä sisällään syöttökentän `value`-arvoa tai vieritettävän alueen `scrollTop`-arvoa. Sen sijaan se varmistaa, että elementin visuaalinen esitys, mukaan lukien kaikki siepatut tilat sen `::view-transition-image-pair`-parissa, liikkuu ja muuttaa kokoaan oikein. Se on yksittäisten elementtisiirtymien näyttämömestari, joka varmistaa, että jokainen nimetty elementti siirtyy vanhasta sijainnistaan uuteen sijaintiinsa sulavasti, ylläpitäen illuusiota yhdestä jatkuvasta elementistä.</p> <h3><code>::view-transition-image-pair(...)</code>: Vanha ja uusi</h3> <p>Jokaisen `::view-transition-group(...)` sisällä selain luo `::view-transition-image-pair(...)`-pseudo-elementin. Tämä pseudo-elementti on pino kahdesta muusta pseudo-elementistä: `::view-transition-old(...)` ja `::view-transition-new(...)`. `image-pair` vastaa elementin vanhan ja uuden visuaalisen tilan välisestä ristihäivytyksestä tai sekoituksesta. Se on kriittinen kohta, jossa tilan sieppauksen visuaalinen puoli tulee esiin.</p> <p>Oletuksena `::view-transition-old` häivyttää pois ja `::view-transition-new` häivyttää sisään, luoden sulavan ristihäivytysefektin. Kehittäjät voivat kohdistaa `image-pair`-elementtiä mukauttaakseen tätä käyttäytymistä, esimerkiksi tekemällä toisen liukuvan ulos ja toisen sisään, tai soveltamalla monimutkaisempia sekoitustiloja. Juuri tämän parin sisällä siepatun *datan* (kuten syöttöarvojen tai vierityspaikkojen) visuaalinen esitys näytetään ja animoidaan.</p> <h3><code>::view-transition-old(...)</code>: Poistuva tilannekuva</h3> <p>Tämä pseudo-elementti edustaa tilannekuvaa elementistä sellaisena kuin se näytti *ennen* DOM-päivitystä. Se on se, mitä käyttäjä alun perin näkee häipyvän pois. On tärkeää, että jos alkuperäisellä elementillä oli sisäinen tila (kuten syöttöarvo tai vierityspaikka), joka siepattiin, tämä tila heijastuu tämän pseudo-elementin visuaalisessa esityksessä. Esimerkiksi, jos tekstiä sisältävä syöttökenttä siepattiin, `::view-transition-old` näyttää kyseisen tekstin osana tilannekuvaansa.</p> <p>Voit soveltaa CSS-animaatioita `::view-transition-old`-elementtiin hallitaksesi, miten poistuva elementti katoaa. Oletuksena se häivyttää pois, mutta voit animoida sen liukumaan, skaalautumaan tai soveltaa mitä tahansa muuta CSS-muunnosta. Tämä tarjoaa tarkan hallinnan vanhan tilan jäähyväisanimaatiosta, varmistaen sen täydellisen integroinnin yleiseen käyttäjäkokemukseen.</p> <h3><code>::view-transition-new(...)</code>: Saapuva tilannekuva</h3> <p>Vastaavasti `::view-transition-new(...)` edustaa tilannekuvaa elementistä *jälkeen* DOM-päivityksen. Tämä on se, mitä käyttäjä näkee häipyvän sisään tai animoituvan paikalleen. Kuten vastineensa, jos alkuperäisellä elementillä oli siepattu tila, `::view-transition-new` näyttää kyseisen tilan. Esimerkiksi, jos syöttökentän arvo muuttui DOM-päivityksen aikana (tai säilytettiin vanhasta tilasta), `::view-transition-new` näyttää päivitetyn tai säilytetyn arvon.</p> <p>Tätä pseudo-elementtiä voidaan myös animoida CSS:llä hallitaksesi, miten uusi elementti ilmestyy. Oletuksena se häivyttää sisään, mutta sitä voidaan mukauttaa liukumaan, skaalautumaan tai muuntumaan yhdessä `::view-transition-old`-elementin kanssa luodaksesi todella räätälöidyn siirtymän. Mahdollisuus manipuloida sekä vanhaa että uutta tilannekuvaa CSS-animaatioilla antaa kehittäjille valtavan voiman luoda ainutlaatuisia ja mukaansatempaavia käyttöliittymäkokemuksia, varmistaen brändin johdonmukaisuuden ja suunnittelukielen ylläpidon riippumatta käyttäjän sijainnista tai laitteesta.</p> <h2>Käytännön toteutukset ja koodiesimerkit</h2> <p>Jotta voit täysin ymmärtää elementin tilan sieppauksen voiman, tutkitaan joitakin käytännön esimerkkejä. Nämä skenaariot ovat yleisiä nykyaikaisissa verkkosovelluksissa ja havainnollistavat, kuinka View Transitions -siirtymät yksinkertaistavat aiemmin monimutkaisia animaatio- ja tilanhallintatehtäviä.</p> <h3>View Transition -siirtymän perusasetukset</h3> <p>Perusaskel minkä tahansa View Transition -siirtymän mahdollistamiseksi on kääriä DOM-päivityksesi `document.startViewTransition()`-funktioon:</p> <div class="code-block-wrapper"> <pre data-language="code"> <code>// JavaScript-tiedostossasi function updateDOM() { // Koodisi DOMin päivittämiseen tulee tähän // esim. innerHTML:n muuttaminen, elementtien lisääminen/poistaminen, tyylien päivittäminen document.getElementById('content').innerHTML = ` <h2>Uusi sisältö</h2> <p>Tämä on päivitetty sisältö.</p> `; } // Käynnistä view transition -siirtymä document.startViewTransition(() => updateDOM()); </code> <div class="copy-button-container"> <button data-code="Ly8gSmF2YVNjcmlwdC10aWVkb3N0b3NzYXNpCmZ1bmN0aW9uIHVwZGF0ZURPTSgpIHsKICAvLyBLb29kaXNpIERPTWluIHDkaXZpdHTkbWlzZWVuIHR1bGVlIHTkaORuCiAgLy8gZXNpbS4gaW5uZXJIVE1MOm4gbXV1dHRhbWluZW4sIGVsZW1lbnR0aWVuIGxpc+TkbWluZW4vcG9pc3RhbWluZW4sIHR5eWxpZW4gcORpdml0dORtaW5lbgogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjb250ZW50JykuaW5uZXJIVE1MID0gYAogICAgPGgyPlV1c2kgc2lz5Gx09jwvaDI+CiAgICA8cD5U5G3kIG9uIHDkaXZpdGV0dHkgc2lz5Gx09i48L3A+CiAgYDsKfQoKLy8gS+R5bm5pc3TkIHZpZXcgdHJhbnNpdGlvbiAtc2lpcnR5beQKZG9jdW1lbnQuc3RhcnRWaWV3VHJhbnNpdGlvbigoKSA9PiB1cGRhdGVET00oKSk7Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p>Tämä yksinkertainen malli kertoo selaimelle: "Olen aikeissa muuttaa DOMia. Ole hyvä ja sieppaa vanha tila, sovella muutokseni, sieppaa sitten uusi tila ja animoi niiden välillä." Tilan sieppauksen taika tapahtuu, kun `view-transition-name` sovelletaan tiettyihin elementteihin `updateDOM()`-funktion sisällä tai elementteihin, jotka säilyvät molemmissa tiloissa.</p> <h3>Esimerkki 1: Lomakkeen syötteen tilan säilyttäminen</h3> <p>Tarkastellaan tilannetta, jossa käyttäjä täyttää syöttökentän, ja sitten osa sivusta muuttuu dynaamisesti, mutta syöttökenttä säilyy. Haluamme, että syöttökentän arvo säilyy.</p> <h4>HTML-rakenne:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="app-container"> <div id="dynamic-content"> <p>Alkuperäinen sivun sisältö.</p> </div> <input type="text" id="my-input" placeholder="Kirjoita jotain..."> <button id="update-button">Päivitä sisältö</button> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iYXBwLWNvbnRhaW5lciI+CiAgPGRpdiBpZD0iZHluYW1pYy1jb250ZW50Ij4KICAgIDxwPkFsa3VwZXLkaW5lbiBzaXZ1biBzaXPkbHT2LjwvcD4KICA8L2Rpdj4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im15LWlucHV0IiBwbGFjZWhvbGRlcj0iS2lyam9pdGEgam90YWluLi4uIj4KICA8YnV0dG9uIGlkPSJ1cGRhdGUtYnV0dG9uIj5Q5Gl2aXTkIHNpc+RsdPY8L2J1dHRvbj4KPC9kaXY+Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS ja <code>view-transition-name</code>:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>/* Määritä view-transition-name syöttöelementille */ #my-input { view-transition-name: input-field-id; border: 1px solid #ccc; padding: 8px; width: 250px; border-radius: 4px; } /* Valinnainen: Lisää siirtymälle perusmuotoilu */ ::view-transition-old(input-field-id), ::view-transition-new(input-field-id) { animation-duration: 0.3s; animation-timing-function: ease-in-out; } ::view-transition-old(input-field-id) { animation-name: fade-out; } ::view-transition-new(input-field-id) { animation-name: fade-in; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } </code> <div class="copy-button-container"> <button data-code="LyogTeTkcml05CB2aWV3LXRyYW5zaXRpb24tbmFtZSBzefZ0dPZlbGVtZW50aWxsZSAqLwojbXktaW5wdXQgewogIHZpZXctdHJhbnNpdGlvbi1uYW1lOiBpbnB1dC1maWVsZC1pZDsKICBib3JkZXI6IDFweCBzb2xpZCAjY2NjOwogIHBhZGRpbmc6IDhweDsKICB3aWR0aDogMjUwcHg7CiAgYm9yZGVyLXJhZGl1czogNHB4Owp9CgovKiBWYWxpbm5haW5lbjogTGlz5OQgc2lpcnR5beRsbGUgcGVydXNtdW90b2lsdSAqLwo6OnZpZXctdHJhbnNpdGlvbi1vbGQoaW5wdXQtZmllbGQtaWQpLAo6OnZpZXctdHJhbnNpdGlvbi1uZXcoaW5wdXQtZmllbGQtaWQpIHsKICBhbmltYXRpb24tZHVyYXRpb246IDAuM3M7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1pbi1vdXQ7Cn0KCjo6dmlldy10cmFuc2l0aW9uLW9sZChpbnB1dC1maWVsZC1pZCkgewogIGFuaW1hdGlvbi1uYW1lOiBmYWRlLW91dDsKfQoKOjp2aWV3LXRyYW5zaXRpb24tbmV3KGlucHV0LWZpZWxkLWlkKSB7CiAgYW5pbWF0aW9uLW5hbWU6IGZhZGUtaW47Cn0KCkBrZXlmcmFtZXMgZmFkZS1vdXQgewogIGZyb20geyBvcGFjaXR5OiAxOyB9CiAgdG8geyBvcGFjaXR5OiAwOyB9Cn0KCkBrZXlmcmFtZXMgZmFkZS1pbiB7CiAgZnJvbSB7IG9wYWNpdHk6IDA7IH0KICB0byB7IG9wYWNpdHk6IDE7IH0KfQo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>JavaScript siirtymän käynnistämiseksi:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>document.getElementById('update-button').addEventListener('click', () => { document.startViewTransition(() => { const dynamicContent = document.getElementById('dynamic-content'); // Simuloi sisällön muuttamista syöttökentän ympärillä dynamicContent.innerHTML = ` <h3>Sisältö päivitetty!</h3> <p>Tämä osio on päivitetty, mutta syötteesi säilyy.</p> <ul> <li>Kohta 1</li> <li>Kohta 2</li> </ul> `; }); }); </code> <div class="copy-button-container"> <button data-code="ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3VwZGF0ZS1idXR0b24nKS5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsKICBkb2N1bWVudC5zdGFydFZpZXdUcmFuc2l0aW9uKCgpID0+IHsKICAgIGNvbnN0IGR5bmFtaWNDb250ZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2R5bmFtaWMtY29udGVudCcpOwogICAgLy8gU2ltdWxvaSBzaXPkbGz2biBtdXV0dGFtaXN0YSBzefZ0dPZrZW505G4geW1w5HJpbGzkCiAgICBkeW5hbWljQ29udGVudC5pbm5lckhUTUwgPSBgCiAgICAgIDxoMz5TaXPkbHT2IHDkaXZpdGV0dHkhPC9oMz4KICAgICAgPHA+VORt5CBvc2lvIG9uIHDkaXZpdGV0dHksIG11dHRhIHN59nR0ZWVzaSBz5GlseXkuPC9wPgogICAgICA8dWw+CiAgICAgICAgPGxpPktvaHRhIDE8L2xpPgogICAgICAgIDxsaT5Lb2h0YSAyPC9saT4KICAgICAgPC91bD4KICAgIGA7CiAgfSk7Cn0pOwo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Tilan säilyttämisen selitys:</strong> Tässä esimerkissä, vaikka `#dynamic-content`-sisältö korvataan kokonaan, `#my-input`-kenttään syötetty teksti säilyy. Koska `#my-input`-elementillä on `view-transition-name: input-field-id`, selain tunnistaa sen pysyväksi elementiksi. Se sieppaa syöttökentän `value`-arvon ennen DOM-päivitystä ja soveltaa sen uudelleen päivityksen jälkeen, vaikka elementin vanhempi tai sisarukset olisivat muuttuneet. Tämä on mullistavaa lomakkeille ja interaktiivisille komponenteille, varmistaen johdonmukaisen käyttäjäkokemuksen ympäröivän käyttöliittymän dynaamisesta luonteesta riippumatta.</p> <h3>Esimerkki 2: Dynaaminen sisältö ja tilan sieppaus (Listan uudelleenjärjestely)</h3> <p>Kuvittele lajiteltava lista kohteista, jossa painikkeen napsauttaminen järjestää ne uudelleen. Haluamme, että uudelleenjärjestely animoituu sulavasti, mutta myös varmistaa, että kaikki fokus- tai vuorovaikutustilat listan kohteiden sisällä säilyvät, jos ne pysyvät listalla.</p> <h4>HTML-rakenne:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="app-container"> <ul id="item-list"> <li class="list-item" data-id="1">Kohde A</li> <li class="list-item" data-id="2">Kohde B</li> <li class="list-item" data-id="3">Kohde C</li> </ul> <button id="sort-button">Järjestä lista (käänteinen)</button> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iYXBwLWNvbnRhaW5lciI+CiAgPHVsIGlkPSJpdGVtLWxpc3QiPgogICAgPGxpIGNsYXNzPSJsaXN0LWl0ZW0iIGRhdGEtaWQ9IjEiPktvaGRlIEE8L2xpPgogICAgPGxpIGNsYXNzPSJsaXN0LWl0ZW0iIGRhdGEtaWQ9IjIiPktvaGRlIEI8L2xpPgogICAgPGxpIGNsYXNzPSJsaXN0LWl0ZW0iIGRhdGEtaWQ9IjMiPktvaGRlIEM8L2xpPgogIDwvdWw+CiAgPGJ1dHRvbiBpZD0ic29ydC1idXR0b24iPkrkcmplc3TkIGxpc3RhIChr5ORudGVpbmVuKTwvYnV0dG9uPgo8L2Rpdj4K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS (dynaamisella <code>view-transition-name</code>-arvolla):</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>/* Jokainen listan kohta saa ainutlaatuisen view-transition-name-arvon JS:n kautta */ .list-item { padding: 10px; margin-bottom: 5px; background-color: #f0f0f0; border-radius: 4px; } /* Mukauta animaatioita yksittäisille listan kohdille */ ::view-transition-group(item-*) { animation-duration: 0.5s; animation-timing-function: ease-in-out; } ::view-transition-old(item-*) { animation-name: fade-out-move; z-index: 1; } ::view-transition-new(item-*) { animation-name: fade-in-move; z-index: 2; } @keyframes fade-out-move { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } } @keyframes fade-in-move { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } to { opacity: 1; transform: translate(0, 0); } } </code> <div class="copy-button-container"> <button data-code="LyogSm9rYWluZW4gbGlzdGFuIGtvaHRhIHNhYSBhaW51dGxhYXR1aXNlbiB2aWV3LXRyYW5zaXRpb24tbmFtZS1hcnZvbiBKUzpuIGthdXR0YSAqLwoubGlzdC1pdGVtIHsKICBwYWRkaW5nOiAxMHB4OwogIG1hcmdpbi1ib3R0b206IDVweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjBmMGYwOwogIGJvcmRlci1yYWRpdXM6IDRweDsKfQoKLyogTXVrYXV0YSBhbmltYWF0aW9pdGEgeWtzaXR05GlzaWxsZSBsaXN0YW4ga29oZGlsbGUgKi8KOjp2aWV3LXRyYW5zaXRpb24tZ3JvdXAoaXRlbS0qKSB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjVzOwogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW4tb3V0Owp9Cgo6OnZpZXctdHJhbnNpdGlvbi1vbGQoaXRlbS0qKSB7CiAgYW5pbWF0aW9uLW5hbWU6IGZhZGUtb3V0LW1vdmU7CiAgei1pbmRleDogMTsKfQoKOjp2aWV3LXRyYW5zaXRpb24tbmV3KGl0ZW0tKikgewogIGFuaW1hdGlvbi1uYW1lOiBmYWRlLWluLW1vdmU7CiAgei1pbmRleDogMjsKfQoKQGtleWZyYW1lcyBmYWRlLW91dC1tb3ZlIHsKICBmcm9tIHsgb3BhY2l0eTogMTsgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMCwgMCk7IH0KICB0byB7IG9wYWNpdHk6IDA7IHRyYW5zZm9ybTogdHJhbnNsYXRlKHZhcigtLWR4LCAwKSwgdmFyKC0tZHksIDApKTsgfQp9CgpAa2V5ZnJhbWVzIGZhZGUtaW4tbW92ZSB7CiAgZnJvbSB7IG9wYWNpdHk6IDA7IHRyYW5zZm9ybTogdHJhbnNsYXRlKHZhcigtLWR4LCAwKSwgdmFyKC0tZHksIDApKTsgfQogIHRvIHsgb3BhY2l0eTogMTsgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMCwgMCk7IH0KfQo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>JavaScript dynaamiselle <code>view-transition-name</code>-arvolle ja uudelleenjärjestelylle:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>const itemList = document.getElementById('item-list'); const sortButton = document.getElementById('sort-button'); function applyViewTransitionNames() { const items = itemList.querySelectorAll('.list-item'); items.forEach(item => { // Määritä dynaamisesti view-transition-name data-id:n perusteella item.style.viewTransitionName = `item-${item.dataset.id}`; }); } // Aseta nimet aluksi applyViewTransitionNames(); sortButton.addEventListener('click', () => { document.startViewTransition(() => { // Hae nykyiset kohteet ja käännä niiden järjestys const itemsArray = Array.from(itemList.children); itemsArray.reverse().forEach(item => itemList.appendChild(item)); // Ei tarvitse asettaa view-transition-name-arvoa uudelleen, jos se on jo asetettu }); }); </code> <div class="copy-button-container"> <button data-code="Y29uc3QgaXRlbUxpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnaXRlbS1saXN0Jyk7CmNvbnN0IHNvcnRCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc29ydC1idXR0b24nKTsKCmZ1bmN0aW9uIGFwcGx5Vmlld1RyYW5zaXRpb25OYW1lcygpIHsKICBjb25zdCBpdGVtcyA9IGl0ZW1MaXN0LnF1ZXJ5U2VsZWN0b3JBbGwoJy5saXN0LWl0ZW0nKTsKICBpdGVtcy5mb3JFYWNoKGl0ZW0gPT4gewogICAgLy8gTeTkcml05CBkeW5hYW1pc2VzdGkgdmlldy10cmFuc2l0aW9uLW5hbWUgZGF0YS1pZDpuIHBlcnVzdGVlbGxhCiAgICBpdGVtLnN0eWxlLnZpZXdUcmFuc2l0aW9uTmFtZSA9IGBpdGVtLSR7aXRlbS5kYXRhc2V0LmlkfWA7CiAgfSk7Cn0KCi8vIEFzZXRhIG5pbWV0IGFsdWtzaQphcHBseVZpZXdUcmFuc2l0aW9uTmFtZXMoKTsKCnNvcnRCdXR0b24uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7CiAgZG9jdW1lbnQuc3RhcnRWaWV3VHJhbnNpdGlvbigoKSA9PiB7CiAgICAvLyBIYWUgbnlreWlzZXQga29odGVldCBqYSBr5ORubuQgbmlpZGVuIGrkcmplc3R5cwogICAgY29uc3QgaXRlbXNBcnJheSA9IEFycmF5LmZyb20oaXRlbUxpc3QuY2hpbGRyZW4pOwogICAgaXRlbXNBcnJheS5yZXZlcnNlKCkuZm9yRWFjaChpdGVtID0+IGl0ZW1MaXN0LmFwcGVuZENoaWxkKGl0ZW0pKTsKICAgIC8vIEVpIHRhcnZpdHNlIGFzZXR0YWEgdmlldy10cmFuc2l0aW9uLW5hbWUtYXJ2b2EgdXVkZWxsZWVuLCBqb3Mgc2Ugb24gam8gYXNldGV0dHUKICB9KTsKfSk7Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Selitys:</strong> Jokainen listan kohde saa ainutlaatuisen `view-transition-name`-arvon `data-id`:nsa perusteella. Kun lista käännetään, DOM-elementit itse järjestetään uudelleen. Koska `view-transition-name` pysyy johdonmukaisena kunkin kohteen yksilölliselle ID:lle, selain sieppaa vanhan sijainnin ja animoi sitten kohteen uuteen sijaintiinsa. Jos nämä listan kohteet sisältäisivät monimutkaisia interaktiivisia elementtejä (esim. kytkimiä, minilomakkeita), niiden sisäiset tilat säilyisivät myös uudelleenjärjestelyn yli, mikä tekee vuorovaikutuksesta vankan ja saumattoman käyttäjälle, riippumatta listan kohteiden määrästä tai käyttäjän maantieteellisestä sijainnista.</p> <h3>Esimerkki 3: Vierityspaikan sieppauksen hallinta</h3> <p>Ajatellaan vieritettävää sisältöaluetta kojelaudalla. Kun käyttäjä suodattaa sisältöä, sisäinen sisältö muuttuu, mutta haluamme säilyttää suodatettavan alueen vierityspaikan, jos käyttäjä on vierittänyt alaspäin.</p> <h4>HTML-rakenne:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="dashboard-layout"> <nav>...</nav> <main id="scrollable-content"> <div class="filters"> <button id="filter-btn">Sovella suodatinta</button> </div> <div id="data-display"> <!-- Paljon dynaamisesti luotua sisältöä --> <p>Sisältörivi 1</p><p>Sisältörivi 2</p>...<p>Sisältörivi 100</p> </div> </main> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iZGFzaGJvYXJkLWxheW91dCI+CiAgPG5hdj4uLi48L25hdj4KICA8bWFpbiBpZD0ic2Nyb2xsYWJsZS1jb250ZW50Ij4KICAgIDxkaXYgY2xhc3M9ImZpbHRlcnMiPgogICAgICA8YnV0dG9uIGlkPSJmaWx0ZXItYnRuIj5Tb3ZlbGxhIHN1b2RhdGludGE8L2J1dHRvbj4KICAgIDwvZGl2PgogICAgPGRpdiBpZD0iZGF0YS1kaXNwbGF5Ij4KICAgICAgPCEtLSBQYWxqb24gZHluYWFtaXNlc3RpIGx1b3R1YSBzaXPkbHT25CAtLT4KICAgICAgPHA+U2lz5Gx09nJpdmkgMTwvcD48cD5TaXPkbHT2cml2aSAyPC9wPi4uLjxwPlNpc+RsdPZyaXZpIDEwMDwvcD4KICAgIDwvZGl2PgogIDwvbWFpbj4KPC9kaXY+Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS sisällön vieritettävyyden ja <code>view-transition-name</code>-arvon asettamiseen:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>#dashboard-layout { display: flex; height: 100vh; } #scrollable-content { flex-grow: 1; overflow-y: auto; /* Tee siitä vieritettävä */ padding: 20px; view-transition-name: main-content-scroll; /* Avain vieritystilan sieppaukselle */ } #data-display p { margin-bottom: 10px; padding: 5px; background-color: #e6e6e6; border-radius: 3px; } /* Oletusarvoiset View Transition -animaatiot */ ::view-transition-old(main-content-scroll), ::view-transition-new(main-content-scroll) { animation-duration: 0.3s; } </code> <div class="copy-button-container"> <button data-code="I2Rhc2hib2FyZC1sYXlvdXQgewogIGRpc3BsYXk6IGZsZXg7CiAgaGVpZ2h0OiAxMDB2aDsKfQoKI3Njcm9sbGFibGUtY29udGVudCB7CiAgZmxleC1ncm93OiAxOwogIG92ZXJmbG93LXk6IGF1dG87IC8qIFRlZSBzaWl05CB2aWVyaXRldHTkduQgKi8KICBwYWRkaW5nOiAyMHB4OwogIHZpZXctdHJhbnNpdGlvbi1uYW1lOiBtYWluLWNvbnRlbnQtc2Nyb2xsOwogIC8qIEF2YWluIHZpZXJpdHlzdGlsYW4gc2llcHBhdWtzZWxsZSAqLwp9CgojZGF0YS1kaXNwbGF5IHAgewogIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgcGFkZGluZzogNXB4OwogIGJhY2tncm91bmQtY29sb3I6ICNlNmU2ZTY7CiAgYm9yZGVyLXJhZGl1czogM3B4Owp9CgovKiBPbGV0dXNhcnZvaXNldCBWaWV3IFRyYW5zaXRpb24gLWFuaW1hYXRpb3QgKi8KOjp2aWV3LXRyYW5zaXRpb24tb2xkKG1haW4tY29udGVudC1zY3JvbGwpLAo6OnZpZXctdHJhbnNpdGlvbi1uZXcobWFpbi1jb250ZW50LXNjcm9sbCkgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4zczsKfQo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>JavaScript suodattimen ja sisällön päivityksen käynnistämiseksi:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>const scrollableContent = document.getElementById('scrollable-content'); const dataDisplay = document.getElementById('data-display'); const filterButton = document.getElementById('filter-btn'); let filtered = false; function generateContent(isFiltered) { let content = ''; const totalLines = 100; for (let i = 1; i <= totalLines; i++) { if (!isFiltered || i % 2 === 0) { // Näytä vain parilliset rivit suodatettuna content += `<p>Sisältörivi ${i} ${isFiltered ? '(Suodatettu)' : ''}</p>`; } } return content; } // Sisällön alustava lataus dataDisplay.innerHTML = generateContent(filtered); filterButton.addEventListener('click', () => { document.startViewTransition(() => { filtered = !filtered; // Vaihda suodatintilaa dataDisplay.innerHTML = generateContent(filtered); }); }); </code> <div class="copy-button-container"> <button data-code="Y29uc3Qgc2Nyb2xsYWJsZUNvbnRlbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc2Nyb2xsYWJsZS1jb250ZW50Jyk7CmNvbnN0IGRhdGFEaXNwbGF5ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2RhdGEtZGlzcGxheScpOwpjb25zdCBmaWx0ZXJCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZmlsdGVyLWJ0bicpOwoKbGV0IGZpbHRlcmVkID0gZmFsc2U7CgpmdW5jdGlvbiBnZW5lcmF0ZUNvbnRlbnQoaXNGaWx0ZXJlZCkgewogIGxldCBjb250ZW50ID0gJyc7CiAgY29uc3QgdG90YWxMaW5lcyA9IDEwMDsKICBmb3IgKGxldCBpID0gMTsgaSA8PSB0b3RhbExpbmVzOyBpKyspIHsKICAgIGlmICghaXNGaWx0ZXJlZCB8fCBpICUgMiA9PT0gMCkgeyAvLyBO5Hl05CB2YWluIHBhcmlsbGlzZXQgcml2aXQgc3VvZGF0ZXR0dW5hCiAgICAgIGNvbnRlbnQgKz0gYDxwPlNpc+RsdPZyaXZpICR7aX0gJHtpc0ZpbHRlcmVkID8gJyhTdW9kYXRldHR1KScgOiAnJ308L3A+YDsKICAgIH0KICB9CiAgcmV0dXJuIGNvbnRlbnQ7Cn0KCi8vIFNpc+RsbPZuIGFsdXN0YXZhIGxhdGF1cwpkYXRhRGlzcGxheS5pbm5lckhUTUwgPSBnZW5lcmF0ZUNvbnRlbnQoZmlsdGVyZWQpOwoKZmlsdGVyQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGRvY3VtZW50LnN0YXJ0Vmlld1RyYW5zaXRpb24oKCkgPT4gewogICAgZmlsdGVyZWQgPSAhZmlsdGVyZWQ7IC8vIFZhaWhkYSBzdW9kYXRpbnRpbGFhCiAgICBkYXRhRGlzcGxheS5pbm5lckhUTUwgPSBnZW5lcmF0ZUNvbnRlbnQoZmlsdGVyZWQpOwogIH0pOwp9KTsK" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Selitys:</strong> Kun 'Sovella suodatinta' -painiketta napsautetaan, `data-display`-sisältö luodaan kokonaan uudelleen. Koska kuitenkin vanhempi `scrollable-content`-div-elementti omaa `view-transition-name: main-content-scroll`, sen `scrollTop`-sijainti siepataan ja säilytetään. Jos käyttäjä vieritti alaspäin ennen suodattimen napsauttamista, hän pysyy samassa suhteellisessa vierityspaikassa sisällön päivityksen jälkeen, mikä tarjoaa sulavan ja keskeytymättömän selauskokemuksen, joka on erityisen arvokas dataintensiivisissä sovelluksissa, joita ammattilaiset käyttävät maailmanlaajuisesti.</p> <h2>Edistyneet tekniikat ja parhaat käytännöt</h2> <p>Elementin tilan sieppauksen tehokas hyödyntäminen vaatii enemmän kuin vain `view-transition-name`-ominaisuuden soveltamista. Harkittu toteutus ja parhaiden käytäntöjen noudattaminen varmistavat, että siirtymäsi ovat suorituskykyisiä, saavutettavia ja todella parantavat käyttäjäkokemusta.</p> <h3>Monimutkaisten siirtymien orkestrointi</h3> <p>Vaikka `view-transition-name` yksinkertaistaa monia tilanteita, monimutkaiset käyttöliittymät vaativat usein hienovaraisempaa orkestrointia. Voit yhdistää View Transitions -siirtymiä perinteisiin CSS-animaatioihin ja JavaScriptiin luodaksesi monivaiheisia siirtymiä:</p> <ul> <li><b>Animaatioiden ketjuttaminen:</b> Voit käyttää `animation-delay`-ominaisuutta eri `::view-transition-*`-pseudo-elementeissä tai jopa niiden sisällä olevissa elementeissä luodaksesi porrastettuja animaatioita. Esimerkiksi hero-kuva saattaa animoitua ensin, minkä jälkeen tekstisisältö liukuu sisään.</li> <li><b>Mukautetut ajoitusfunktiot:</b> `ease-in-out`-funktion lisäksi tutustu mukautettuihin `cubic-bezier()`-funktioihin antaaksesi animaatioillesi ainutlaatuisen tunteen, joka on linjassa brändisi globaalin suunnittelukielen kanssa.</li> <li><b>Dynaaminen `view-transition-name`:</b> Kuten listan uudelleenjärjestelyesimerkissä näytettiin, `view-transition-name` voidaan lisätä ja poistaa dynaamisesti JavaScriptin avulla. Tämä on tehokasta elementeille, jotka ilmestyvät, katoavat tai vaihtavat roolia käyttöliittymässä. Varmista, että nimet ovat ainutlaatuisia koko dokumentissa siirtymän aikana.</li> </ul> <h3>Suorituskykyyn liittyvät huomiot</h3> <p>View Transitions -siirtymät on suunniteltu suorituskykyisiksi, siirtäen työtä selaimen optimoidulle renderöintiputkelle. Joitakin huomioita kuitenkin säilyy:</p> <ul> <li><b>Minimoi suurten elementtien siirtymät:</b> Vaikka View Transitions -siirtymät käsittelevät tilannekuvia tehokkaasti, erittäin suurten tai lukuisten elementtien animointi voi silti vaikuttaa suorituskykyyn. Käytä `view-transition-name`-ominaisuutta harkitusti, pääasiassa elementeissä, jotka todella hyötyvät ainutlaatuisesta siirtymästä.</li> <li><b>Vältä liiallisia DOM-muutoksia:</b> Vaikka View Transitions -siirtymät erottavat animaation DOM-päivityksistä, massiiviset, optimoimattomat DOM-muutokset `startViewTransition()`-takaisinkutsun sisällä voivat silti aiheuttaa lyhyen viiveen ennen siirtymän alkamista. Optimoi DOM-päivityksesi nopeiksi.</li> <li><b>Laitteistokiihdytys:</b> Varmista, että animoit ominaisuuksia (kuten `transform` ja `opacity`), jotka hyötyvät laitteistokiihdytyksestä. View Transitions -siirtymät hyödyntävät tätä luonnostaan, mutta on hyvä olla tietoinen mukautetuista animaatioista.</li> <li><b>Testaus eri laitteilla:</b> Testaa aina siirtymiäsi useilla eri laitteilla, huippuluokan pöytäkoneista heikompitehoisiin mobiililaitteisiin, varmistaaksesi sulavan kokemuksen globaalille käyttäjäkunnalle.</li> </ul> <h3>Saavutettavuusvaikutukset</h3> <p>Kaunis siirtymä on tehokas vain, jos se on kaikkien käyttäjien saavutettavissa. Elementin tilan sieppauksella on tässä roolinsa, mutta myös muita näkökohtia on huomioitava:</p> <ul> <li><b><code>prefers-reduced-motion</code>:</b> Kunnioita aina käyttäjän `prefers-reduced-motion`-asetusta. CSS View Transitions -siirtymät tarjoavat automaattisen tavan poistaa animaatiot käytöstä käyttäjiltä, jotka suosivat vähemmän liikettä. Varmista, että myös mukautetut CSS-animaatiosi `::view-transition-*`-elementeille kunnioittavat tätä mediakyselyä.</li> <li><b>Fokuksen hallinta:</b> Vaikka vieritys- ja syöttötilat siepataan, fokuksen nimenomainen hallinta voi olla kriittistä. Varmista View Transition -siirtymän jälkeen, että näppäimistön fokus päätyy loogiseen elementtiin uudessa näkymässä. Esimerkiksi, jos siirryt uudelle sivulle, aseta fokus pääotsikkoon.</li> <li><b>Semanttinen HTML:</b> Jatka semanttisen HTML:n käyttöä. View Transitions -siirtymät toimivat parhaiten, kun taustalla oleva rakenne on looginen ja saavutettava, mikä antaa aputeknologioille mahdollisuuden tulkita sisältöä oikein visuaalisista animaatioista riippumatta.</li> <li><b>Selkeä palaute:</b> Vaikka siirtymät olisivat sulavia, anna selkeää visuaalista ja auditiivista palautetta toiminnoista, erityisesti käyttäjille, joilla voi olla kognitiivisia heikentymiä tai jotka käyttävät ruudunlukijoita.</li> </ul> <h3>Selainyhteensopivuus ja vararatkaisut</h3> <p>CSS View Transitions -siirtymät ovat suhteellisen uusi ominaisuus. Vaikka ne ovat laajalti tuettuja Chromium-pohjaisissa selaimissa, tuki muissa selaimissa (kuten Firefox ja Safari) on aktiivisessa kehitysvaiheessa. Globaalille yleisölle vankka strategia sisältää progressiivisen parantamisen:</p> <ul> <li><b>Ominaisuuden tunnistus:</b> Käytä `if (document.startViewTransition)` -ehtoa soveltaaksesi View Transitions -siirtymiä ehdollisesti. Jos sitä ei tueta, sovelluksesi pitäisi silti toimia oikein, vaikkakin vähemmän animoidulla kokemuksella.</li> <li><b>Siro rappeutuminen:</b> Suunnittele sovelluksesi niin, että se toimii täydellisesti ilman View Transitions -siirtymiä. Siirtymien tulisi parantaa, ei olla kriittisiä, ydintoiminnallisuudelle.</li> <li><b>Polyfillit (varoen):</b> Vaikka joillekin animaatio-ominaisuuksille on olemassa polyfillejä, todellinen polyfill View Transitions -siirtymien syvälle DOM-tilannekuvaukselle ja tilan sieppaukselle on monimutkainen ja usein epäkäytännöllinen. Keskity natiiviin ominaisuuksien tunnistukseen.</li> </ul> <h3>View Transitions -siirtymien virheenjäljitys</h3> <p>Nykyaikaiset selaimen kehittäjätyökalut tarjoavat erinomaista tukea View Transitions -siirtymien virheenjäljitykseen:</p> <ul> <li><b>Elements-paneeli:</b> Tarkastele `::view-transition`-pseudo-elementtejä Elements-paneelissa siirtymän aikana. Tämä antaa sinun nähdä `group`-, `image-pair`-, `old`- ja `new`-elementit sekä niihin sovelletut tyylit/animaatiot.</li> <li><b>Animations-paneeli:</b> Kehittäjätyökalujen Animations-paneeli tarjoaa aikajananäkymän kaikista aktiivisista animaatioista, mukaan lukien View Transitions -siirtymien ohjaamat. Voit pysäyttää, selata ja tarkastella jokaista animaation vaihetta.</li> <li><b>Performance-paneeli:</b> Käytä Performance-paneelia tunnistaaksesi mahdolliset pullonkaulat siirtymien aikana, kuten pitkät skriptin suoritusajat tai asettelun sekoittuminen.</li> <li><b>Konsolilokit:</b> Käytä `console.log`-komentoa `startViewTransition()`-takaisinkutsusi sisällä seurataksesi sovelluksen tilaa ja DOM-muutoksia ennen ja jälkeen tilannekuvien.</li> </ul> <h2>Globaali vaikutus ja käyttöliittymäkehityksen tulevaisuus</h2> <p>CSS View Transitions -siirtymien esittely, erityisesti sen tehokkailla elementin tilan sieppausominaisuuksilla, edustaa merkittävää harppausta eteenpäin verkkokäyttöliittymien kehityksessä. Sen vaikutus ulottuu pelkän estetiikan ulkopuolelle, muuttaen perustavanlaatuisesti sitä, miten kehittäjät lähestyvät monimutkaisia interaktiivisia kokemuksia monimuotoiselle, globaalille käyttäjäkunnalle.</p> <h3>Käyttäjäkokemuksen parantaminen maailmanlaajuisesti</h3> <p>Eri maista ja kulttuureista tuleville käyttäjille johdonmukainen ja sujuva käyttöliittymä on yleisesti arvostettu. View Transitions -siirtymät tilan sieppauksella edistävät tätä merkittävästi:</p> <ul> <li><b>Kognitiivisen kuormituksen vähentäminen:</b> Sulavat siirtymät, jotka ylläpitävät kontekstia (kuten vierityspaikkaa tai syöttöarvoja), vähentävät käyttäjien henkistä ponnistelua orientoituakseen uudelleen navigoinnin tai vuorovaikutuksen jälkeen, tehden sovelluksista saavutettavampia ja vähemmän turhauttavia.</li> <li><b>Havaitun suorituskyvyn parantaminen:</b> Vaikka taustalla oleva datan haku tai DOM-päivitykset kestäisivät hetken, hyvin toteutettu View Transition antaa vaikutelman välittömästä reagoivuudesta, mikä on erityisen hyödyllistä alueilla, joilla on hitaammat internetyhteydet tai vähemmän tehokkaat laitteet.</li> <li><b>Johdonmukaisuus eri laitteilla:</b> View Transitions -siirtymien selainhallittu luonne varmistaa johdonmukaisemman animaation laadun eri laitteilla ja näyttökoo'oilla, korkearesoluutioisista näytöistä pieniin mobiilinäyttöihin, tarjoten yhtenäisen brändikokemuksen maailmanlaajuisesti.</li> <li><b>Miellyttävät vuorovaikutukset:</b> Hienovaraiset, hyvin suunnitellut animaatiot parantavat sovelluksen havaittua laatua ja ammattimaisuutta, johtaen korkeampaan käyttäjätyytyväisyyteen ja sitoutumiseen.</li> </ul> <h3>Monimutkaisen käyttöliittymälogiikan yksinkertaistaminen</h3> <p>Kehittäjän näkökulmasta Elementin tilan sieppaus yksinkertaistaa dramaattisesti hienostuneiden käyttöliittymien rakentamista. Ennen tätä dynaamisten elementtitilojen hallinta animaatioiden aikana oli usein hauras ja sanavalmis prosessi, erityisesti suurissa sovelluksissa, joita kehittivät hajautetut tiimit. Kehittäjien ei enää tarvitse kirjoittaa toistuvaa JavaScriptiä tallentaakseen ja palauttaakseen vierityspaikkoja, syöttöarvoja tai dynaamista muotoilua, kun elementti säilyy näkymän vaihtuessa.</p> <p>Tämä johtaa:</p> <ul> <li><b>Lisääntyneeseen kehittäjän tehokkuuteen:</b> Vähemmän aikaa manuaaliseen tilanhallintaan tarkoittaa enemmän aikaa keskittyä sovelluksen ydinlogiikkaan ja innovatiivisiin ominaisuuksiin.</li> <li><b>Parantuneeseen koodin ylläpidettävyyteen:</b> Siirtymien ja tilan sieppauksen ilmoittaminen CSS:ssä (`view-transition-name`-ominaisuudella) tai yksinkertaisilla JavaScript-kutsuilla (`startViewTransition`) tekee koodista siistimpää, luettavampaa ja helpommin ylläpidettävää eri aikavyöhykkeillä ja kulttuurikonteksteissa työskenteleville kehittäjille.</li> <li><b>Vähentyneeseen bugien määrään:</b> Tilan sieppauksen automatisointi poistaa monia potentiaalisia bugeja, jotka liittyvät manuaaliseen tilan säilyttämiseen, johtaen vankempiin ja luotettavampiin sovelluksiin.</li> </ul> <h3>Vilkaus tulevaisuuteen</h3> <p>CSS View Transitions -siirtymät, ja erityisesti Elementin tilan sieppaus, kehittyvät edelleen. Työryhmä tutkii aktiivisesti parannuksia ja laajentaa sen kykyjä. Voimme odottaa entistä tarkempaa hallintaa siihen, mitä tiettyjä tiloja siepataan, syvempää integraatiota selaimen renderöintiputkiin entistä paremman suorituskyvyn saavuttamiseksi, ja mahdollisesti laajennuksia monimutkaisempien elementtiominaisuuksien tai jopa mukautettujen datatilojen animointiin.</p> <p>Tämä perustavanlaatuinen teknologia tasoittaa tietä uudelle aikakaudelle verkkosovelluksissa, jotka kilpailevat natiivien työpöytä- tai mobiilisovellusten kanssa sulavuudessaan ja interaktiivisuudessaan, säilyttäen samalla verkkoalustan luontaisen avoimuuden ja saavutettavuuden. Se antaa kehittäjille ympäri maailmaa mahdollisuuden rakentaa entistä mukaansatempaavampia, käyttäjäystävällisempiä ja suorituskykyisempiä digitaalisia kokemuksia, rikkoen selaimessa mahdollisen rajoja.</p> <h2>Yhteenveto</h2> <p>CSS View Transition Capture on paljon muutakin kuin visuaalinen temppu; se on syvällinen edistysaskel verkkokehityksessä, joka vastaa pitkäaikaiseen haasteeseen elementin tilan ylläpitämisestä käyttöliittymän muutosten yli. Säilyttämällä saumattomasti käyttäjän syötteet, vierityspaikat ja dynaamisen muotoilun, se antaa kehittäjille mahdollisuuden luoda verkkosovelluksia, jotka tuntuvat todella natiiveilta, reagoivilta ja intuitiivisilta.</p> <p>Globaalille yleisölle tämä tarkoittaa johdonmukaisempaa, vähemmän turhauttavaa ja aidosti miellyttävää kokemusta riippumatta heidän laitteestaan, verkkoyhteyksistään tai kulttuurikontekstistaan. Kehittäjinä CSS View Transitions -siirtymien omaksuminen ja sen tilan sieppausominaisuuksien hallitseminen on ratkaisevan tärkeää seuraavan sukupolven erittäin interaktiivisten ja käyttäjäkeskeisten verkkosovellusten rakentamisessa. Aloita kokeileminen `view-transition-name`-ominaisuudella tänään ja avaa uusi ulottuvuus saumattomaan käyttöliittymäsuunnitteluun projekteissasi.</p></div><template id="P:4"></template></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">CSS View Transitions</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">elementin tilan sieppaus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">sulavat käyttöliittymäsiirtymät</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">verkkoanimaatio</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">yhden sivun sovellukset</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">SPA</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">käyttäjäkokemus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">kehittäjän tuottavuus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">selainyhteensopivuus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">suorituskyvyn optimointi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">saavutettavuus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiivinen parantaminen</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">käyttöliittymäkehitys</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">front-end-kehitys</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>